﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=utf-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=no" />
<title>梦境迷离 - 点点滴滴 - 时光轴</title>
<link rel="shortcut icon" th:href="@{/images/Logo_40.png}"
	type="image/x-icon">
<!--Layui-->
<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
<!--font-awesome-->
<link th:href="@{/plug/font-awesome/css/font-awesome.min.css}"
	rel="stylesheet" />
<!-- animate.css -->
<link th:href="@{/css/animate.min.css}" rel="stylesheet" />
<!--全局样式表-->
<link th:href="@{/css/global.css}" rel="stylesheet" />
<!-- 本页样式表 -->
<link th:href="@{/css/timeline.css}" rel="stylesheet" />
</head>
<body>
	<!-- 导航 -->
	<nav class="blog-nav layui-header">
		<div class="blog-container">
			<!-- QQ互联登陆 -->
			<!-- <a target="_blank" th:href="@{/login}"
			 class="blog-user"><span style="color: white;text-align: right;font-size: 15px;">
			 <i class="layui-icon" style="font-size: 15px;">&#xe614;</i></span>
			</a> --><!--  <a href="javascript:;" class="blog-user layui-hide"> <img
				th:src="@{/images/Absolutely.jpg}" alt="jxnu-liguobin" title="jxnu-liguobin" />
			</a> --> <a class="blog-logo" th:href="@{/index/home.html}">梦境迷离</a>
			<ul class="layui-nav" lay-filter="nav">
				<li class="layui-nav-item"><a th:href="@{/index/home.html}"><i
						class="fa fa-home fa-fw"></i>&nbsp;网站首页</a></li>
				<li class="layui-nav-item"><a th:href="@{/index/article.html}"><i
						class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a></li>
				<li class="layui-nav-item"><a
					th:href="@{/indexViews/resource.html}"><i
						class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a></li>
				<li class="layui-nav-item layui-this"><a
					th:href="@{/indexViews/timeline.html}"><i
						class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a></li>
				<li class="layui-nav-item"><a th:href="@{/index/about.html}"><i
						class="fa fa-info fa-fw"></i>&nbsp;关于本站</a></li>
			</ul>
			<!-- 手机和平板的导航开关 -->
			<a class="blog-navicon" href="javascript:;"> <i
				class="fa fa-navicon"></i>
			</a>
		</div>
	</nav>
	<!-- 主体（一般只改变这里的内容） -->
	<div class="blog-body">
		<div class="blog-container">
			<blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
				<cite><a th:href="@{/index/home.html}" title="网站首页">网站首页</a></cite> <cite>
					<a th:href="@{/indexViews/timeline.html}" title="点点滴滴">点点滴滴</a>
				</cite> <cite> <a>时光轴</a></cite>
			</blockquote>
			<div class="blog-main">
				<div class="child-nav shadow">
					<span
						class="child-nav-btn child-nav-btn-this">
						<a th:href="@{/indexViews/timeline.html}"> 时光轴</a></span>  
						<span class="child-nav-btn"><a
						th:href="@{/indexViews/note.html}">笔记墙</a></span>
				</div>
				<div class="timeline-box shadow">
					<div class="timeline-main">
						<h1>
							<i class="fa fa-clock-o"></i>时光轴<span> —— 记录生活点点滴滴</span>
						</h1>
						<div class="timeline-line"></div>
						<div class="timeline-year">
							<h2>
								<a class="yearToggle" href="javascript:;">2017年</a><i
									class="fa fa-caret-down fa-fw"></i>
							</h2>
							<div class="timeline-month">
								<h3 class=" animated fadeInLeft">
									<a class="monthToggle" href="javascript:;">12月</a><i
										class="fa fa-caret-down fa-fw"></i>
								</h3>
								<ul>
									<li class=" ">
										<div class="h4  animated fadeInLeft">
											<p class="date">12月23日 19:33</p>
										</div>
										<p class="dot-circle animated ">
											<i class="fa fa-dot-circle-o"></i>
										</p>
										<div class="content animated fadeInRight">完成线上测试与优化，over</div>
										<div class="clear"></div>
									</li>
									<li class=" ">
										<div class="h4  animated fadeInLeft">
											<p class="date">12月28日 20:29</p>
										</div>
										<p class="dot-circle animated ">
											<i class="fa fa-dot-circle-o"></i>
										</p>
										<div class="content animated fadeInRight">完成前端显示</div>
										<div class="clear"></div>
									</li>
									<li class=" ">
										<div class="h4  animated fadeInLeft">
											<p class="date">12月8日 08:35</p>
										</div>
										<p class="dot-circle animated ">
											<i class="fa fa-dot-circle-o"></i>
										</p>
										<div class="content animated fadeInRight">功能补充</div>
										<div class="clear"></div>
									</li>
								</ul>
							</div>
							<div class="timeline-month">
								<h3 class=" animated fadeInLeft">
									<a class="monthToggle" href="javascript:;">11月</a><i
										class="fa fa-caret-down fa-fw"></i>
								</h3>
								<ul>
									<li class=" ">
										<div class="h4  animated fadeInLeft">
											<p class="date">11月27日 20:29</p>
										</div>
										<p class="dot-circle animated ">
											<i class="fa fa-dot-circle-o"></i>
										</p>
										<div class="content animated fadeInRight">完成各功能CRUD</div>
										<div class="clear"></div>
									</li>
									<li class=" ">
										<div class="h4  animated fadeInLeft">
											<p class="date">11月7日17:35</p>
										</div>
										<p class="dot-circle animated ">
											<i class="fa fa-dot-circle-o"></i>
										</p>
										<div class="content animated fadeInRight">搭建后台管理界面ui</div>
										<div class="clear"></div>
									</li>
								</ul>
							</div>
							<div class="timeline-month">
								<h3 class=" animated fadeInLeft">
									<a class="monthToggle" href="javascript:;">10月</a><i
										class="fa fa-caret-down fa-fw"></i>
								</h3>
								<ul>
									<li class=" ">
										<div class="h4  animated fadeInLeft">
											<p class="date">10月20日 9:40</p>
										</div>
										<p class="dot-circle animated ">
											<i class="fa fa-dot-circle-o"></i>
										</p>
										<div class="content animated fadeInRight">设计博客数据库表与关系</div>
										<div class="clear"></div>
									</li>
									<li class=" ">
										<div class="h4  animated fadeInLeft">
											<p class="date">10月11日 20:29</p>
										</div>
										<p class="dot-circle animated ">
											<i class="fa fa-dot-circle-o"></i>
										</p>
										<div class="content animated fadeInRight">后端技术选型</div>
										<div class="clear"></div>
									</li>
									<li class=" ">
										<div class="h4  animated fadeInLeft">
											<p class="date">10月1日12:30</p>
										</div>
										<p class="dot-circle animated ">
											<i class="fa fa-dot-circle-o"></i>
										</p>
										<div class="content animated fadeInRight">需求分析</div>
										<div class="clear"></div>
									</li>
								</ul>
							</div>
						</div>
						<h1 style="padding-top:4px;padding-bottom:2px;margin-top:40px;">
							<i class="fa fa-hourglass-end"></i>THE END
						</h1>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 底部 -->
		<footer class="blog-footer">
		<p>
			<span>Copyright</span><span>&copy;</span><span>2017</span><a href="https://www.dreamylost.cn">梦境迷离</a><span>Design
				By jxnu-liguobin</span>
		</p>
		<p>
			<a href="http://www.miitbeian.gov.cn" target="_blank">赣ICP备17017283号-1</a>
		</p>
	</footer>
	<!--侧边导航-->
	<ul
		class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide"
		lay-filter="nav">
		<li class="layui-nav-item"><a th:href="@{/index/home.html}"><i
				class="fa fa-home fa-fw"></i>&nbsp;网站首页</a></li>
		<li class="layui-nav-item"><a th:href="@{/index/article.html}"><i
				class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a></li>
		<li class="layui-nav-item"><a
			th:href="@{/indexViews/resource.html}"><i
				class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a></li>
		<li class="layui-nav-item layui-this"><a
			th:href="@{/indexViews/timeline.html}">
			<i class="fa fa-road fa-fw"></i>&nbsp;点点滴滴</a></li>
		<li class="layui-nav-item"><a th:href="@{/index/about.html}"><i
				class="fa fa-info fa-fw"></i>&nbsp;关于本站</a></li>
	</ul>
	<!--分享窗体-->
	<div class="blog-share layui-hide">
		<div class="blog-share-body">
			<div style="width: 200px;height:100%;">
				<div class="bdsharebuttonbox">
					<a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a> <a
						class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a> <a
						class="bds_weixin" data-cmd="weixin" title="分享到微信"></a> <a
						class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
				</div>
			</div>
		</div>
	</div>
	 <!-- 音乐播放器 -->
    <div id="QPlayer">
	<ol id="playlist"></ol>
	<div id="pContent">
		<div id="player">
			<span class="cover"></span>
			<div class="ctrl">
				<div class="musicTag marquee">
					<strong>Title</strong>
					 <span> - </span>
					<span class="artist">Artist</span>
				</div>
				<div class="progress">
					<div class="timer left">0:00</div>
					<div class="contr">
						<div class="rewind icon"></div>
						<div class="playback icon"></div>
						<div class="fastforward icon"></div>
					</div>
					<div class="right">
						<div class="liebiao icon"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="ssBtn">
		        <div class="adf"></div>
	    </div>
	</div>
	</div>
    
	<!--遮罩-->
	<div class="blog-mask animated layui-hide"></div>
	<!-- layui.js -->
	<script th:src="@{/layui/layui.js}"></script>
	<!-- 全局脚本 -->
	<script th:src="@{/js/global.js}"></script>
	<!-- 本页脚本 -->
	<!-- 音乐 -->
	<script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/jquery.marquee.min.js}"></script>
	<script th:src="@{/js/player.js}"></script>
	<script th:inline="javascript" type="text/javascript">
        layui.use('jquery', function () {
            var $ = layui.jquery;

            $(function () {
                $('.monthToggle').click(function () {
                    $(this).parent('h3').siblings('ul').slideToggle('slow');
                    $(this).siblings('i').toggleClass('fa-caret-down fa-caret-right');
                });
                $('.yearToggle').click(function () {
                    $(this).parent('h2').siblings('.timeline-month').slideToggle('slow');
                    $(this).siblings('i').toggleClass('fa-caret-down fa-caret-right');
                });
            });
        });
    </script>
</body>
</html>